<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="mall/header::head-fragment('张院百货商城-订单结算','order-detail')">
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">

<body>
    <header th:replace="mall/header::header-fragment"></header>
    <!-- nav -->
    <nav th:replace="mall/header::nav-fragment"></nav>

    <!-- personal -->
    <div id="personal">
        <div class="self-info center">

            <!-- sidebar -->
            <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

            <div class="intro fr">
                <div class="uc-box uc-main-box">
                    <div class="uc-content-box order-view-box">
                        <div class="box-hd">
                            <h1 class="title">填写并核对订单信息</h1>
                            <div class="more clearfix">
                                <div class="actions">
                                    <a id="saveOrder" class="btn btn-small btn-primary" title="提交订单">提交订单</a>
                                </div>
                            </div>
                        </div>
                        <div class="box-bd">
                            <div class="uc-order-item uc-order-item-pay">
                                <div class="order-detail">

                                    <div class="order-summary">
                                        <div class="order-progress">
                                            <ol class="progress-list clearfix progress-list-5">
                                                <li class="step step-done">
                                                    <div class="progress"><span class="text">购物车</span></div>
                                                    <div class="info"></div>
                                                </li>
                                                <li class="step step-active">
                                                    <div class="progress"><span class="text">下单</span></div>
                                                    <div class="info"></div>
                                                </li>
                                                <li class="step">
                                                    <div class="progress"><span class="text">付款</span></div>
                                                    <div class="info"></div>
                                                </li>
                                                <li class="step">
                                                    <div class="progress"><span class="text">出库</span></div>
                                                    <div class="info"></div>
                                                </li>
                                                <li class="step">
                                                    <div class="progress"><span class="text">交易成功</span></div>
                                                    <div class="info"></div>
                                                </li>
                                            </ol>
                                        </div>
                                    </div>
                                    <table class="order-items-table">
                                        <tbody>

                                            <th:block th:each="item : ${myShoppingCartItems}">
                                                <tr>
                                                    <td class="col col-thumb">
                                                        <div class="figure figure-thumb">
                                                            <a target="_blank"
                                                                th:href="@{'/goods/detail/'+${item.goodsId}}">
                                                                <img th:src="@{${item.goodsCoverImg}}" width="80"
                                                                    height="80" alt="">
                                                            </a>
                                                        </div>
                                                    </td>
                                                    <td class="col col-name">
                                                        <p class="name">
                                                            <a target="_blank"
                                                                th:href="@{'/goods/detail/'+${item.goodsId}}"
                                                                th:text="${item.goodsName}">mall</a>
                                                        </p>
                                                    </td>
                                                    <td class="col col-price">
                                                        <p class="price"
                                                            th:text="${item.sellingPrice+'元 x '+item.goodsCount}">
                                                            1299元 × 1</p>
                                                    </td>
                                                    <td class="col col-actions">
                                                    </td>
                                                </tr>
                                            </th:block>
                                        </tbody>
                                    </table>
                                </div>
                                <div id="editAddr" class="order-detail-info">
                                    <h3>收货信息</h3>
                                    <table class="info-table">
                                        <tbody>
                                            <tr>
                                                <th>收货地址：</th>
                                                <td class="user_address_label"
                                                    th:text="${session.MallUser.address==''?'无':session.MallUser.address}">
                                                    mall
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="actions">
                                        <a class="btn btn-small btn-line-gray J_editAddr"
                                            href="javascript:openUpdateModal();">修改</a>
                                    </div>
                                </div>
                                <div id="editTime" class="order-detail-info">
                                    <h3>支付方式</h3>
                                    <table class="info-table">
                                        <tbody>
                                            <tr>
                                                <th>支付方式：</th>
                                                <td>在线支付</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <div class="actions">
                                    </div>
                                </div>
                                <div class="order-detail-total">
                                    <table class="total-table">
                                        <tbody>
                                            <tr>
                                                <th>商品总价：</th>
                                                <td><span class="num" th:text="${priceTotal+'.00'}">1299.00</span>元</td>
                                            </tr>
                                            <tr>
                                                <th>运费：</th>
                                                <td><span class="num">0</span>元</td>
                                            </tr>
                                            <tr>
                                                <th class="total">应付金额：</th>
                                                <td class="total"><span class="num"
                                                        th:text="${priceTotal+'.00'}">1299.00</span>元
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
                aria-labelledby="personalInfoModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h6 class="modal-title" id="personalInfoModalLabel">地址修改</h6>
                        </div>
                        <div class="modal-body">
                            <form id="personalInfoForm">
                                <div class="form-group">
                                    <input type="hidden" id="userId" th:value="${session.MallUser.userId}">
                                    <label for="address" class="control-label">收货地址:</label>
                                    <input type="text" class="form-control" id="address" name="address"
                                        placeholder="请输入收货地址" th:value="${session.MallUser.address}" required="true">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>


    <div th:replace="mall/footer::footer-fragment"></div>

    <!-- jQuery -->
    <script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
    <script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
    <script th:src="@{/mall/js/bootstrap3.js}"></script>
    <script th:src="@{/mall/js/axios.js}"></script>
    <script type="text/javascript">
        $('#saveOrder').click(function () {
            var userAddress = $(".user_address_label").html();
            if (userAddress == '' || userAddress == '无') {
                swal("请填写收货信息", {
                    icon: "error",
                });
                return;
            }
            if (userAddress.trim().length < 10) {
                swal("请输入正确的收货信息", {
                    icon: "error",
                });
                return;
            }
            window.location.href = '../saveOrder';
        });

        function openUpdateModal() {
            $('#personalInfoModal').modal('show');
        }

        //绑定modal上的保存按钮
        $('#saveButton').click(function () {
            var address = $("#address").val();
            var userId = $("#userId").val();
            var data = {
                "userId": userId,
                "address": address
            };

            axios.post('/personal/updateInfo', data)
                .then(res => {
                    if (res.status == 200) {
                        $('#personalInfoModal').modal('hide');
                        window.location.reload();
                    } else {
                        $('#personalInfoModal').modal('hide');
                        swal(res.data, {
                            icon: "error",
                        });
                    }
                })
                .catch(err => {
                    swal('操作失败', {
                        icon: "error",
                    });
                })

        });
    </script>
</body>

</html>